<!-- Risk风险管理 -->
<template>
  <div class="container-risk">
    <!-- 头部 -->
    <van-nav-bar
      title="风险管理"
      @click-left="goBack"
      @click-right="goProblemAnalysis"
      fixed
      :border="false"
      :z-index="100"
      class="my-nav-bar"
    >
      <span class="el-icon-arrow-left fontsize" slot="left"></span>
      <img
        src="../../../assets/imgs/speed_of_progress.png"
        class="speed_of_progress fontsize"
        slot="right"
      />
    </van-nav-bar>
    <div class="wrapper">
      <van-tabs
        v-model="active"
        swipeable
        animated
        sticky
        @change="handleIndex"
        class="my-tabs"
      >
        <!-- 整改中 begin -->
        <van-tab :title="`整改中（${handlePageTotal}）`">
          <!-- 隔层 -->
          <div class="interlayer"></div>
          <!-- Layout 布局 -->
          <van-row
            type="flex"
            justify="space-between"
            align="center"
            class="my-row row-head"
          >
            <van-col span="4">序号</van-col>
            <van-col span="10">主题</van-col>
            <van-col span="6">问题类型</van-col>
            <van-col span="4">状态</van-col>
          </van-row>
          <van-list
            v-model="handleLoading"
            :finished="handleFinished"
            finished-text="没有更多了"
            :error.sync="errorHandle"
            :immediate-check="false"
            error-text="请求失败，点击重新加载"
            @load="load_more_handle"
            class="my-list"
          >
            <van-row
              type="flex"
              justify="space-between"
              align="center"
              class="my-row"
              v-for="(item, index) in dataHandle"
              :key="index"
              @click.native="clickRow(item)"
           
            >
              <van-col span="4">{{ index + 1 }}</van-col>
              <van-col span="10" class="subject">{{ item.Subject }}</van-col>
              <van-col span="6">{{ item.ProblemType }}</van-col>
              <van-col span="4">{{ Number(item.Status) + 1 }}/3</van-col>
            </van-row>
          </van-list>
        </van-tab>
        <!-- 整改中 end -->
        <!-- 已整改 begin -->
        <van-tab :title="`已整改（${overPageTotal}）`">
          <!-- 隔层 -->
          <div class="interlayer"></div>
          <!-- Layout 布局 -->
          <van-row
            type="flex"
            justify="space-between"
            align="center"
            class="my-row row-head"
          >
            <van-col span="4">序号</van-col>
            <van-col span="10">主题</van-col>
            <van-col span="6">问题类型</van-col>
            <van-col span="4">状态</van-col>
          </van-row>
          <van-list
            v-model="overLoading"
            :finished="overFinished"
            finished-text="没有更多了"
            :immediate-check="false"
            :error.sync="errorOver"
            error-text="请求失败，点击重新加载"
            @load="load_more_over"
            class="my-list"
          >
            <van-row
              type="flex"
              justify="space-between"
              align="center"
              class="my-row"
              v-for="(item, index) in dataOver"
              :key="index"
              @click.native="clickRow(item)"
            >
              <van-col span="4">{{ index + 1 }}</van-col>
              <van-col span="10" class="subject">{{ item.Subject }}</van-col>
              <van-col span="6">{{ item.ProblemType }}</van-col>
              <van-col span="4">{{ Number(item.Status) + 1 }}/3</van-col>
            </van-row>
          </van-list>
        </van-tab>
        <!-- 已整改 end -->
        <!-- 我的发布 begin -->
        <!-- <van-tab :title="`我的发布（${ingPageTotal}）`">
          <div class="interlayer"></div>
          <van-row
            type="flex"
            justify="space-between"
            align="center"
            class="my-row row-head"
          >
            <van-col span="4">序号</van-col>
            <van-col span="10">主题</van-col>
            <van-col span="6">问题类型</van-col>
            <van-col span="4">状态</van-col>
          </van-row>
          <van-list
            v-model="ingLoading"
            :finished="ingFinished"
            finished-text="没有更多了"
            :error.sync="errorIng"
            :immediate-check="false"
            error-text="请求失败，点击重新加载"
            @load="load_more_ing"
            class="my-list"
          >
            <van-row
              type="flex"
              justify="space-between"
              align="center"
              class="my-row"
              v-for="(item, index) in dataIng"
              :key="index"
              @click.native="clickRow(item)"
            >
              <van-col span="4">{{ index + 1 }}</van-col>
              <van-col span="10" class="subject">{{ item.Subject }}</van-col>
              <van-col span="6">{{ item.ProblemType }}</van-col>
              <van-col span="4">{{ Number(item.Status) + 1 }}/3</van-col>
            </van-row>
          </van-list>
        </van-tab> -->
        <!-- 我的发布 end -->
        <!-- 待接收 begin -->
        <van-tab :title="`待接收（${ingPageTotal}）`">
          <div class="interlayer"></div>
          <van-row
            type="flex"
            justify="space-between"
            align="center"
            class="my-row row-head"
          >
            <van-col span="4">序号</van-col>
            <van-col span="10">主题</van-col>
            <van-col span="6">问题类型</van-col>
            <van-col span="4">状态</van-col>
          </van-row>
          <van-list
            v-model="ingLoading"
            :finished="ingFinished"
            finished-text="没有更多了"
            :error.sync="errorIng"
            :immediate-check="false"
            error-text="请求失败，点击重新加载"
            @load="load_more_ing"
            class="my-list"
          >
            <van-row
              type="flex"
              justify="space-between"
              align="center"
              class="my-row"
              v-for="(item, index) in dataIng"
              :key="index"
              @click.native="clickRow(item)"
            >
              <van-col span="4">{{ index + 1 }}</van-col>
              <van-col span="10" class="subject">{{ item.Subject }}</van-col>
              <van-col span="6">{{ item.ProblemType }}</van-col>
              <van-col span="4">{{ Number(item.Status) + 1 }}/3</van-col>
            </van-row>
          </van-list>
        </van-tab>
        <!-- 待接收 end -->
      </van-tabs>
    </div>
  </div>
</template>

<script type='textecmascript-6'>
import { GetRiskList,GetRiskUserList } from "@/api/api.js";
export default {
  data() {
    return {
      ProjectID: localStorage.getItem("projectid"), //项目ID
      userID: localStorage.getItem("userId"), //用户ID
      loading: false, //是否处于加载状态
      finished: false, //是否已加载完成
      errorHandle: false, //是否加载失败，加载失败后点击错误提示可以重新触发load事件，必须使用sync修饰符
      errorIng: false,
      errorOver: false,
      dataIng: [], //待接收
      dataHandle: [], //整改中
      dataOver: [], //已整改
      ingLoading: false,
      ingFinished: false,
      handleLoading: false,
      handleFinished: false,
      overLoading: false,
      overFinished: false,
      pageTotal: 0,
      currentPage: 1,
      pageSize: 13,
      ingCurrentPage: 1,
      ingPageTotal: 0, //待接收数
      handleCurrentPage: 1,
      handlePageTotal: 0, //整改中数
      overCurrentPage: 1,
      overPageTotal: 0, //已整改数
      active: this.$route.query.active, //tab默认位置
      titleArr: [
        { value: 0, label: "整改中（0条）" },
        { value: 1, label: "待接收（0条）" },
        { value: 2, label: "已整改（0条）" },
      ],
      tableData: [],
    };
  },
  created() {
    this.getRiskIng(); //待接收
    this.getRiskHandle(); //整改中
    this.getRiskOver(); //已整改
  },
  methods: {
    /**
     * @name 根据项目ID和状态获取风险管理问题列表（待接收）
     * @param {string} projectId 项目ID
     * @param {string} status 状态 0： 未整改 1： 整改中 2： 已整改
     * @param {integer} pageIndex 页码
     * @param {integer} pageSize 页大小
     */
    getRiskIng() {
      let that = this;
      that.ingLoading = true;
      let params = {
        ProjectID: that.ProjectID,
        userid: that.userID,
        status: 0,
        pageIndex: that.ingCurrentPage,
        pageSize: that.pageSize,
      };
      that
        .Request(GetRiskList(params))
        .then((data) => {
          if (data.StatusCode === 200) {
            if (data.Detiel.length) {
              that.ingPageTotal = parseInt(data.Count);
              // this.titleArr[1].label = "待接收（"+ parseInt(data.Count) +"条）"
              data.Detiel.forEach((element) => {
                that.dataIng.push({
                  Subject: element.Subject,
                  ProblemType: element.ProblemType,
                  Status: element.Status,
                  ID: element.ID,
                });
              });
              // if(that.active === 1){
              //   that.tableData = that.dataIng
              // }
            } else {
              that.ingFinished = true;
            }
            that.ingLoading = false; //加载状态关闭
            // 数据全部加载完成
            // if (that.ingCurrentPage * that.pageSize >= data.Count) {
            //   that.ingFinished = true;
            // }else{
            //   that.ingFinished = false;
            // }
          } else {
            that.$message({
              type: "error",
              message: data.Message,
              center: "true",
            });
          }
          that.ingLoading = false;
        })
        .catch(() => {
          that.errorIng = true;
        });
    },
    /**
     * @name 滚动条与底部距离小于offset时触发，offset默认300
     */
    load_more_ing: function () {
      this.ingCurrentPage += 1;
      // this.offset = this.limit * this.page;
      this.getRiskIng();
    },
    /**
     * @name 根据项目ID和状态获取风险管理问题列表（整改中）
     * @param {string} projectId 项目ID
     * @param {string} status 状态 0： 未整改 1： 整改中 2： 已整改
     * @param {integer} pageIndex 页码
     * @param {integer} pageSize 页大小
     */
    getRiskHandle() {
      this.handleLoading = true; //加载状态打开
      let params = {
        ProjectID: this.ProjectID,
        userid: this.userID,
        status: 1,
        pageIndex: this.handleCurrentPage,
        pageSize: this.pageSize,
      };
      this.Request(GetRiskList(params))
        .then((data) => {
          if (data.StatusCode === 200) {
            if (data.Detiel.length) {
              this.handlePageTotal = parseInt(data.Count);
              // this.titleArr[0].label = "整改中（"+ parseInt(data.Count) +"条）"
              data.Detiel.forEach((element) => {
                this.dataHandle.push({
                  Subject: element.Subject,
                  ProblemType: element.ProblemType,
                  Status: element.Status,
                  ID: element.ID,
                });
              });
              // if(this.active === 0){
              //   this.tableData = this.dataHandle
              // }
            } else {
              this.handleFinished = true;
            }
            this.handleLoading = false; //加载状态关闭
            // 数据全部加载完成
            // if (this.handleCurrentPage * this.pageSize >= data.Count) {
            //   this.handleFinished = true;
            // }
          } else {
            this.$message({
              type: "error",
              message: data.Message,
              center: "true",
            });
          }
          this.handleLoading = false;
        })
        .catch(() => {
          this.errorHandle = true;
        });
    },
    /**
     * @name 滚动条与底部距离小于offset时触发，offset默认300
     */
    load_more_handle: function () {
      this.handleCurrentPage += 1;
      // this.offset = this.limit * this.page;
      this.getRiskHandle();
    },
    /**
     * @name 根据项目ID和状态获取风险管理问题列表（已整改）
     * @param {string} projectId 项目ID
     * @param {string} status 状态 0： 未整改 1： 整改中 2： 已整改
     * @param {integer} pageIndex 页码
     * @param {integer} pageSize 页大小
     */
    getRiskOver() {
      this.overLoading = true;
      let params = {
        ProjectID: this.ProjectID,
        userid: this.userID,
        status: 2,
        pageIndex: this.overCurrentPage,
        pageSize: this.pageSize,
      };
      this.Request(GetRiskList(params))
        .then((data) => {
          if (
            data.StatusCode === 200 &&
            typeof "data.StatusCode" != "undefined"
          ) {
            if (data.Detiel.length) {
              this.overPageTotal = parseInt(data.Count);
              // this.titleArr[2].label = "已整改（"+ parseInt(data.Count) +"条）"
              // this.dataOver = data.Detiel;
              data.Detiel.forEach((element) => {
                this.dataOver.push({
                  Subject: element.Subject,
                  ProblemType: element.ProblemType,
                  Status: element.Status,
                  ID: element.ID,
                });
              });
              // if(this.active === 2){
              //   this.tableData = this.dataOver
              // }
            } else {
              this.overFinished = true;
            }
            this.overLoading = false; //加载状态关闭
            // 数据全部加载完成
            // if (this.overCurrentPage * this.pageSize >= data.Count) {
            //   this.overFinished = true;
            // }
          } else {
            this.$message({
              type: "error",
              message: data.Message,
              center: "true",
            });
          }
          this.overLoading = false;
        })
        .catch(() => {
          this.errorOver = true;
        });
    },
    /**
     * @name 滚动条与底部距离小于offset时触发，offset默认300
     */
    load_more_over: function () {
      this.overCurrentPage += 1;
      // this.offset = this.limit * this.page;
      this.getRiskOver();
    },
    /**
     * @name 滚动条与底部距离小于offset时触发
     */
    onLoad() {
      switch (this.active) {
        case 0:
          {
            this.getRiskHandle(); //整改中
          }
          break;
        case 1:
          {
            this.getRiskIng(); //待接收
          }
          break;
        case 2:
          {
            this.getRiskOver(); //已整改
          }
          break;

        default:
          break;
      }
    },
    //tab切换
    handleIndex() {
      console.log("active", this.active);
      // switch (this.active) {
      //   case 0:
      //     {
      //       this.tableData = this.dataHandle
      //     }
      //     break;
      //   case 1:
      //     {
      //       this.tableData = this.dataIng
      //     }
      //     break;
      //   case 2:
      //     {
      //       this.tableData = this.dataOver
      //     }
      //     break;

      //   default:
      //     break;
      // }
    },
    formatterState(row, column) {
      console.log(row, column);
      return row.Status + "/3";
    },
    //返回
    goBack() {
      this.$router.push({ path: "/nav/to/index" });
    },
    //跳转问题类型分析
    goProblemAnalysis() {
      this.$router.push({ path: "/ProblemAnalysis" });
    },
    //点击表格行
    clickRow(row) {
      console.log("row", row);
      this.$router.push({
        path: "/riskDetails",
        query: { active: this.active, riskID: row.ID, state: row.Status },
      });
    },
  },
  mounted() {},
  watch: {
    // active(v){
    //   console.log("-------",v)
    // }
    // $route: {
    //   handler: function(val, oldVal){
    //     console.log("==",val);
    //   },
    //   // 深度观察监听
    //   deep: true
    // }
  },
};
</script>
<style lang='stylus' scoped rel='stylesheet/stylus'>
.container-risk {
  width: 100%;
  height: 100%;

  .van-nav-bar {
    // height 88px
    // line-height 88px
    // border-bottom 1px solid #E5E5E5
    .fontsize {
      // font-size 42px
      // color #333
      // display inline-block
      // vertical-align middle
    }

    .speed_of_progress {
      width: 36px;
      height: 36px;
    }
  }

  .wrapper {
    margin-top: 88px;

    .interlayer {
      width: 100%;
      height: 26px;
      background-color: #F6F8FA;
    }
  }
}
</style>
<style>
@import "~@/assets/css/resetVant.css";
.container-risk .my-row.row-head {
  background: rgba(88, 146, 255, 1);
}
.container-risk .my-row.row-head .van-col {
  color: rgba(255, 255, 255, 1);
}
.container-risk .my-row {
  width: 100%;
  height: 80px;
  /* line-height: 80px; */
}
.container-risk .my-row:nth-child(odd) {
  background: #f0f2f5;
}
.container-risk .my-row .van-col.subject {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container-risk .my-row .van-col {
  text-align: center;
}
.container-risk .my-list .my-row {
  border-bottom: 1px solid rgba(229, 229, 229, 1);
}
.my-list .van-list__loading-text,
.my-list .van-list__finished-text,
.my-list .van-list__error-text {
  line-height: 80px;
}
/* 顶部表头 */
/* .container-risk .van-nav-bar .van-nav-bar__title {
  font-size: 36px;
} */
/*tab切换栏*/
/* .container-risk .van-tab span {
  font-size: 30px;
  line-height: 80px;
}
.container-risk .van-tabs--line .van-tabs__wrap {
  height: 80px;
}
.container-risk .van-tabs--line .van-tabs__wrap {
  color: #666;
  position: fixed;
  top: 88px !important;
}
.container-risk .van-tabs--line .van-tabs__wrap .van-tabs__nav {
  background-color: #fff;
}
.container-risk .van-tab--active {
  color: #5a92ff;
} */
/* tab下边线 */
/* .container-risk .van-hairline--top-bottom::after {
  border-width: 0 0 2px 0;
}
.container-risk .van-tabs--line {
  padding-top: 80px;
}
 */
.container-risk .van-tabs__line {
  background-color: #5a92ff;
}
/*表格*/
.container-risk .el-table thead tr th {
  background-color: #5892ff;
  color: #fff;
}
/* .container-risk .el-table {
  color: #333;
  font-size: 24px;
}
.container-risk .el-table .cell {
  line-height: 76px;
}
.container-risk .el-table th div {
  vertical-align: middle;
  color: #fff;
} */
</style>
